<template>
	<view class="activity-box">
		<view class="uni-margin-wrap">
			<swiper class="swiper" :current="swiper.currentswiper" @change="changeswiper">
				<swiper-item v-for="(item,idx) in formData.picture" :key="'img'+idx">
					<image :src="item" class="topic-swi-item" mode=""></image>
				</swiper-item>
			</swiper>
			<view class="uni-badge">{{swiper.currentswiper + 1}}/{{formData.picture&&formData.picture.length}}</view>
			<view class="enrollBox"><span class="span">{{formData.enrollNum}}</span>/{{formData.num}}提交</view>
		</view>
		<view class="activity-content">
			<view class="act-row-flex">{{formData.name}}</view>
			<view class="time">活动时间：{{timestamp(formData.beginTime,'s')}}~{{timestamp(formData.endTime,'s')}}</view>
			<view class="time">报名时间：{{timestamp(formData.enrollBegin,'s')}}~{{timestamp(formData.enrollEnd,'s')}}</view>
			<view class="act-row-copy">
				<image :src="$imgUrl + '/icon/search_addr.png'" class="image" mode=""></image>
				<view class="view">{{formData.address}}</view>
				<!-- <span class="span" @click="getClipboard(formData.address)">复制</span> -->
			</view>
		</view>
		<view class="activity-desc">
			<view class="view-1">活动描述</view>
			<view class="view-2">
				{{formData.details}}
			</view>
		</view>
		<view class="act-form" v-if="formData.isEdit">
			<uni-forms :modelValue="formData" :label-width="150">
				<uni-forms-item v-for="(item,index) in formData.items" :key="index" name="name" :label="item.key">
					<input type="text" v-model="item.value" placeholder="请输入" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<button v-if="formData.isEdit" class="submit-btn" :loading="isLoading" :disabled="isLoading" @click="submit">立即报名</button>
	</view>
</template>
<script setup lang="ts">
import { reactive,ref } from "vue"
import { getActivityEnroll,switchOrNot } from '@/common/API/landlord'
import { onLoad,onNavigationBarButtonTap } from "@dcloudio/uni-app"
import dayjs  from "dayjs"
import config from '@/utils/config'

const formData = reactive({
	activityId: null,
	items: [],
	beginTime: null,//活动开始
	endTime: null,//活动结束
	enrollBegin: null,//报名开始
	enrollEnd: null,//报名结束
	name: null,
	details: null,
	picture: null,
	address: null,
	num: null,
	enrollNum: null,
	isEdit: null,
	shareInfo: null
})

const swiper = reactive({
	currentswiper: 0,
	id: null,
	thumbs: null
})
const changeswiper = (e:any) => {
	swiper.currentswiper = e.detail.current;
}

//复制
const getClipboard = (value:string) => {
	uni.setClipboardData({
		data: value,
		success: function () {
			console.log('success');
		}
	});
}
const getSwitchOrNot = async () => {
	let res = await switchOrNot(formData.activityId)
	formData.isEdit = res
}
//提交
const isLoading = ref(false)
const submit = async () => {
	for(var i=0;i<formData.items.length;i++){
		if(!formData.items[i].value){
			uni.showToast({
				title: `请输入${formData.items[i].key}`,
				icon: 'none'
			})
			return false
		}
	}
	let data = {
		activityId: formData.activityId,
		items: formData.items
	}
	isLoading.value = true
	let res = await getActivityEnroll(data)
	isLoading.value = false
	if(res){
		uni.showToast({
			title: '报名成功',
			icon: 'success'
		});
		uni.redirectTo({
			url: '/pages/personal/activity/list'
		})
	}
}
onNavigationBarButtonTap(()=>{
	uni.share({
		provider: "weixin",
		scene: "WXSceneSession",
		type: 5,
		miniProgram: {
		    id:  config.wxChatAppId,
		    path: `/pages/personal/activity/index?info=${formData.shareInfo}`,
			type: 0,
			webUrl: 'http://uniapp.dcloud.io'
		},
		title: formData.name,    // 分享标题
		summary: formData.details,    // 分享内容文字
		imageUrl: `${formData.picture}@oosImage|384h_480w_0e`,    //分享封面图片
		success: function(res) {
			console.log(res)
			// 此处是调起微信分享成功的回调
		},
		fail: function(err) {
			console.log(err)
			// 此处是调起微信分享失败的回调
		}
	});
})
//处理时间戳
const timestamp = (val:any,s) => {
	return !s ? dayjs(val).format('YYYY-MM-DD') : dayjs(val).format('YYYY-MM-DD HH:mm')
}
onLoad((options)=>{
	if(options){
		if (!uni.getStorageSync('userId')) {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}else{
			let info = JSON.parse(decodeURIComponent(options.info))
			formData.shareInfo = options.info
			console.log(info)
			formData.activityId = info.id
			getSwitchOrNot()
			formData.beginTime = info.beginTime//活动开始
			formData.endTime = info.endTime//活动结束
			formData.enrollBegin = info.enrollBegin//报名开始
			formData.enrollEnd = info.enrollEnd//报名结束
			formData.name = info.name
			formData.details = info.details
			if(info.picture!= ''){
				formData.picture = info.picture.split(',')
			}
			formData.address = info.address
			formData.num = info.num
			formData.enrollNum = info.enrollNum
			info.fillItemList.map((_,__)=>{
				if(_){
					_ = { key : _, value : ''}
					formData.items.push(_)
				}
			})
		}
	}
})
</script>
<style lang="scss" scoped>
	.activity-box{
		padding-bottom: 110rpx;
		.uni-margin-wrap {
			position: relative;
			background: #fff;
			padding: 0 32rpx 20rpx;
			overflow: hidden;
			position: relative;
			.uni-badge{
				position: absolute;
				right: 60rpx;
				bottom: 40rpx;
				color: #fff;
				background: rgba(255, 255, 255, 0.6);
				border-radius: 6rpx;
				padding: 0 10rpx;
				box-shadow: 0px 40rpx 80rpx  rgba(0, 0, 0, 0.05);
			}
			.enrollBox{
				position: absolute;
				top: 86rpx;
				right: 32rpx;
				background: rgba(0, 0, 0, 0.5);
				color: #fff;
				border-radius: 20rpx 0rpx 0rpx 20rpx;
				font-size: 24rpx;
				padding: 6rpx 24rpx 6rpx 20rpx;
				line-height: 34rpx;
			}
			.swiper {
				height: 796rpx;
				width:100%;
				z-index: -1;
			}
			.swiper-item,.topic-swi-item{
				display: block;
				width: 100%;
				height: 100%;
				text-align: center;
				z-index: -1;
			}
		}
		.activity-content{
			padding: 0 32rpx;
			background: #fff;
			.view{
				padding-bottom: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.act-row-flex{
				color: #111;
				font-size: 30rpx;
				line-height: 44rpx;
			}
			.time{
				font-size: 26rpx;
				color: #999;
				line-height: 30rpx;
				margin-top: 14rpx;
			}
			.act-row-copy{
				display: flex;
				align-items: center;
				padding-bottom: 28rpx;
				border-bottom: 1rpx solid rgba(229, 229, 229, 1);
				margin-top: 16rpx;
				.image{
					width: 19rpx;
					height: 23rpx;
				}
				.view{
					margin: 0 16rpx 0 11rpx;
					color: #999;
					line-height: 40rpx;
				}
				.span{
					color: rgba(253, 150, 24, 1);
				}
			}
		}
		.activity-desc{
			padding: 32rpx;
			background: #fff;
			.view-1{
				color: rgba(51, 51, 51, 1);
				font-size: 32rpx;
			}
			.view-2{
				color: rgba(102, 102, 102, 1);
				font-size: 26rpx;
				word-wrap: break-word;
			}
		}
		.uni-forms-item{
			border-bottom: 2rpx solid #f5f5f5;
			align-items: center;
			padding: 20rpx 0;
			margin: 0;
			uni-input{
				font-size: 28rpx;
			}
			::v-deep.uni-input-wrapper{
				text-align: right;
			}
			::v-deep.uni-forms-item__label{
				color: rgba(77, 77, 77, 1);
				font-size: 32rpx;
			}
		}
		.act-form{
			margin-top: 20rpx;
			padding: 0 32rpx;
			background: #fff;
			::v-deep.uni-forms-item__content{
				display: flex;
				align-items: center;
			}
		}
		.submit-btn{
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 999;
			width: 100%;
			line-height: 88rpx;
			background: rgba(253, 150, 24, 1);
			color: #fff;
			font-size: 32rpx;
			border-radius: 0;
			padding-bottom: calc(constant(safe-area-inset-bottom) - 40rpx); /*兼容 IOS<11.2*/
			padding-bottom: calc(env(safe-area-inset-bottom) - 40rpx); /*兼容 IOS>11.2*/
			&::after{
				display: none;
			}
		}
	}
</style>